<script setup lang="ts">
// 引入依赖库
import '../../assets/icon/iconfont.js' // 图标库
import { onMounted, ref, watch } from 'vue'; // Vue组合式API
// 引入项目工具函数和hooks
import { useArticle } from '@/hooks/articleHook'; // 文章数据管理hook
import { useRouter } from 'vue-router'; // 路由跳转
import GalleryCar from '@/components/gallery/car/galleryCar.vue'
import Empty from '@/components/common/empty.vue'
import { useCountStore } from '@/stores/count';
// 初始化路由
const router = useRouter();

// 获取文章数据和列表
const {
    getArticle,
    articleList, // 文章列表数据
    articlCount, //文章总数
} = useArticle(); // 文章管理hook

// 组件属性定义
const props = defineProps({
    pageSize: {
        type: Number,
        default: 4,
    },
    state: {
        type: Number,
        default: 1, // 1=已发布, 0=未发布
    },
    subsetId: {
        type: Number,
        default: -1, // -1=显示全部, 其他值=特定分类
    },
    searchTerm: {
        type: String,
        default: '', // 搜索关键词
    },
    isChangeSmall: {
        type: Boolean,
        default: false, // 是否使用小尺寸布局
    },
})

// 跳转到图库列表页
const galleryMore = () => {
    router.push({ path: '/gallery' })
}

/* ===== 图库轮播控制 ===== */

// 当前显示的文章索引
const currentIndex = ref(0)

// 过渡动画控制
const isTransitioning = ref(false) // 是否正在过渡中
const transitionDirection = ref<'left' | 'right'>('right') // 过渡方向

/**
 * 切换到上一篇文章
 * 添加过渡动画，防止重复点击
 */
const prevItem = () => {
    if (currentIndex.value > 0 && !isTransitioning.value) {
        isTransitioning.value = true
        transitionDirection.value = 'left' // 向左滑动
        currentIndex.value--
        // 300ms后结束过渡状态
        setTimeout(() => {
            isTransitioning.value = false
        }, 300)
    }
}

/**
 * 切换到下一篇文章
 * 添加过渡动画，防止重复点击
 */
const nextItem = () => {
    if (currentIndex.value < articleList.value.length - 1 && !isTransitioning.value) {
        isTransitioning.value = true
        transitionDirection.value = 'right' // 向右滑动
        currentIndex.value++
        // 300ms后结束过渡状态
        setTimeout(() => {
            isTransitioning.value = false
        }, 300)
    }
}

// 文章查询参数
const request = {
    pageSize: props.pageSize, // 每页数量
    nowPage: 1, // 当前页码
    state: 1, // 只显示已发布
    subset_id: props.subsetId, // 分类筛选
    searchTerm: props.searchTerm, // 搜索词
    classify: 1, // 分类类型
    count: true, // 是否返回总数
}
const countStore = useCountStore();
// 监听文章总数变化
watch(() => articlCount.value, (newCount) => {
  countStore.galleryCount =newCount;
  console.log(countStore.galleryCount);
});


// 组件挂载时加载文章数据
onMounted(() => {
    getArticle(request);
})
</script>

<template>
    <div class="sm:w-[300px] md:w-[400px] lg:w-[640px] xl:w-[1300px]">
        <div class="w-full flex items-center justify-between border-b border-dashed border-gray-300 mb-5">
            <div class="flex items-center">
                <svg class="icon--large" aria-hidden="true">
                    <use xlink:href="#icon-xuanzetukutupian"></use>
                </svg>
                <h1 class="text-xl font-semibold text-gray-500"> 最新图库</h1>
            </div>
            <div>
                <div class="flex items-center">
                    <svg class="icon--large" aria-hidden="true">
                        <use xlink:href="#icon-quanbu"></use>
                    </svg>
                    <h1 class="text-xl font-semibold text-gray-500 hover:text-lime-400" @click="galleryMore"> Mroe</h1>
                </div>
            </div>
        </div>
        <GalleryCar :articleList="articleList" :isChangeSmall="props.isChangeSmall" :currentIndex="currentIndex" />
        <!-- 5. 上一篇 / 下一篇按钮 -->
        <div v-if="articleList.length > 0" class="w-full flex justify-center gap-4 mt-4">
            <svg class="icon--xl" aria-hidden="true" @click="prevItem" v-show="currentIndex !== 0">
                <use xlink:href="#icon-zuo"></use>
            </svg>
            <svg class="icon--xl" aria-hidden="true" @click="nextItem" v-show="currentIndex !== articleList.length - 1">
                <use xlink:href="#icon-you"></use>
            </svg>
        </div>
        <!-- 暂无数据 -->
        <div v-if="articleList.length === 0">
            <Empty />
        </div>
    </div>
</template>

<style scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon--large {
    width: 2em;
    height: 2em;
}

.icon--xl {
    width: 3em;
    height: 3em;
}

/* 右上角梯形切边样式 */
.clip-path-triangle-right {
    clip-path: polygon(100% 0, 100% 100%, 70% 0);
}

/* 滑动过渡动画 */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    transition: all 0.3s ease-in-out;
}

.slide-right-enter-from {
    opacity: 0;
    transform: translateX(30px);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}

.slide-left-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
